@import "../../sassmixins/mixins";
@import "ani";

body, html, .page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.page {
  display: none;
  font-size: 1rem;
  position: absolute;
  top: 0;
  left: 0;

  .bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;

    .bottom_lt {
      background-image: url("../image/bottom_lt.png");
      background-size: 100% 100%;
      width: px2em-s(560px);
      height: px2em-s(383px);
      @include center-block;
    }

    .bottom_left {
      background-image: url("../image/bottom_left_tr.png");
      background-size: 100% 100%;
      width: px2em-s(1000px);
      height: px2em-s(429px);
      bottom: 0;
      right: px2em-s(640px - 586px);
      position: absolute;

      .left_persion {
        background-image: url("../image/left_person.png");
        width: px2em-s(107px);
        height: px2em-s(159px);
        background-size: 100% 100%;
        position: absolute;
        right: px2em-s(462px);
        bottom: px2em-s(10px);
      }
    }

    .bottom_right {
      background-image: url("../image/bottom_right_tr.png");
      background-size: 100% 100%;
      width: px2em-s(1000px);
      height: px2em-s(422px);
      position: absolute;
      bottom: 0;
      left: px2em-s(73px);

      .word1 {
        position: absolute;
        bottom: px2em-s(82px);
        left: px2em-s(207px);
        transform: rotate(-23deg);
        -webkit-transform: rotate(-23deg);
        div {
          color: #ffffff;
          line-height: 1.2;
          font-size: px2em-s(26px);

        }
      }

      .zs_1 {
        background-image: url("../image/bottom_right_zs_1.png");
        background-size: 100% 100%;
        width: px2em-s(56px);
        height: px2em-s(44px);
        position: absolute;
        bottom: px2em-s(152px);
        left: px2em-s(492px);
      }

      .word2 {
        position: absolute;
        bottom: px2em-s(33px);
        left: px2em-s(289px);
        transform: rotate(-23deg);
        -webkit-transform: rotate(-23deg);

        div {
          color: #ffffff;
          line-height: 1.2;
          font-size: px2em-s(20px);
          text-align: center;
        }
      }

      .rule {
        position: absolute;
        bottom: px2em-s(33px);
        left: px2em-s(378px);
        padding: px2em-s(20px);
        transform: rotate(-23deg);
        -webkit-transform: rotate(-23deg);

        div {
          color: #ffffff;
          line-height: 1.2;
          font-size: px2em-s(26px);
          text-align: center;
        }
      }
    }

  }

  .dialog.dialog_share {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;
    display: none;

    .inner {
      background-image: url("../image/dialog_share_word.png");
      width: px2em-s(640px);
      height: px2em-s(115px);
      background-size: 100% 100%;
    }
  }

  .dialog.dialog_shard_success {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    display: none;
  }
}

.page#loading {
  background-image: url("../image/loading_bg.jpg");
  background-size: 100% 100%;
  display: block;

  .circle {
    width: px2em-s(115px);
    height: px2em-s(115px);
    background-image: url("../image/loading_circle.png");
    background-size: 100% 100%;
    @include center-block;
    margin-top: px2em-s(309px);
    animation: loading_circle 1s linear infinite;
    -webkit-animation: loading_circle 1s linear infinite;
  }

  .loading_word {
    //width: px2em-s(109px);
    //height: px2em-s(22px);
    @include center-block;
    font-size: px2em-s(26px);
    line-height: 1.4;
    text-align: center;
    //background-image: url("../image/loading_load.png");
    //background-size: 100% auto;
    //animation: loading_word 2s steps(4) infinite;
    //-webkit-animation: loading_word 2s steps(4) infinite;
    margin-top: px2em-s(30px);
    margin-bottom: px2em-s(55px);
  }

  .word {
    text-align: center;
    span {
      font-size: px2em-s(32px);
      line-height: 1.5;
      color: #fff;
      display: block;
    }
  }
}

.page#rule {
  .wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .inner {
      .content {
        width: px2em-s(640px);
        height: px2em-s(1663px);
        background-image: url("../image/rule.jpg");
        background-size: 100% 100%;
      }
    }
  }
}

.page#home {
  background-image: url("../image/home_bg.png");
  background-size: 100% 100%;

  .logo {
    background-image: url("../image/logo.png");
    background-size: 100% 100%;
    width: px2em-s(640px);
    height: px2em-s(80px);
    margin-top: px2em-s(18px);
    @include center-block;
  }

  .title {
    background-image: url("../image/title.png");
    background-size: 100% 100%;
    width: px2em-s(640px);
    height: px2em-s(79px);
    @include center-block;
    margin-top: px2em-s(43px);
    opacity: 0;
  }

  .title_little {
    background-image: url("../image/title_little.png");
    background-size: 100% 100%;
    width: px2em-s(640px);
    height: px2em-s(26px);
    @include center-block;
    margin-top: px2em-s(15px);
    opacity: 0;
  }

  .wang {
    background-image: url("../image/home_wang.png");
    background-position: center;
    background-size: auto 100%;
    height: px2em-s(160px);
    width: 100%;
    margin-top: px2em-s(171px);
    min-width: px2em-s(640px);
    border-bottom: 1px solid #fff;
    position: absolute;
    bottom: px2em-s(417px);


    .inner {
      width: px2em-s(640px);
      height: px2em-s(160px);
      position: relative;
      @include center-block;

      .begin_btn {
        background-image: url("../image/home_begin_btn.png");
        background-size: 100% 100%;
        width: px2em-s(147px);
        height: px2em-s(51px);
        position: absolute;
        top: 0;
        left: px2em-s(58px);
        opacity: 0;
      }

      .rule_btn {
        background-image: url("../image/home_rule_btn.png");
        background-size: 100% 100%;
        width: px2em-s(146px);
        height: px2em-s(50px);
        position: absolute;
        bottom: 0;
        right: px2em-s(58px);
        opacity: 0;
      }

      .ball {
        background-image: url("../image/home_ball.png");
        background-size: 100% 100%;
        width: px2em-s(231px);
        height: px2em-s(291px);
        position: absolute;
        left: px2em-s((640px - 231px)/2);
        top: px2em-s(-95px);
        opacity: 0;
      }
    }
  }

  .bottom {
    .bottom_lt {
      opacity: 0;
    }

    .bottom_left {
      opacity: 0;
    }

    .bottom_right {
      opacity: 0;
    }
  }

}

.page#mine, .page#share {
  background-image: url("../image/mine_bg.jpg");
  background-size: 100% 100%;

  .title {
    background-image: url("../image/title.png");
    background-size: 100% 100%;
    width: px2em-s(640px);
    height: px2em-s(79px);
    @include center-block;
    margin-top: px2em-s(45px);
  }

  .title_little {
    background-image: url("../image/title_little.png");
    background-size: 100% 100%;
    width: px2em-s(640px);
    height: px2em-s(26px);
    @include center-block;
    margin-top: px2em-s(15px);
  }

  .wang {
    background-image: url("../image/home_wang.png");
    background-position: center;
    background-size: auto 100%;
    height: px2em-s(140px);
    width: 100%;
    margin-top: px2em-s(45px);
    min-width: px2em-s(640px);
    .inner {
      width: px2em-s(640px);
      height: px2em-s(140px);
      position: relative;
      @include center-block;
      background-image: url("../image/mine_prize.png");
      background-size: 100% 100%;
    }
  }
  .status {
    background-color: #fe6400;
    min-width: px2em-s(640px);
    border-top: px2em-s(8px) solid #c95203;
    .prize_status {
      width: px2em-s(640px);
      @include center-block;
      display: -webkit-box;
      padding: px2em-s(8px) 0;
      .item {
        -webkit-box-flex: 1;
        @include box-sizing();
        &:nth-child(1), &:nth-child(2) {
          border-right: 1px solid #ffbf7a;
        }
        padding-bottom: px2em-s(12px);

        .name {
          text-align: center;
          color: #ffffff;
          font-size: px2em-s(24px);
          line-height: 1.5;
        }
        .num {
          text-align: center;
          color: #ffffff;
          font-size: px2em-s(20px);
          margin-top: 0.3em;
          position: relative;

          > div {
            display: inline-block;
          }

          .add {
            position: absolute;
            bottom: 0;
            margin-left: px2em-s(50px);
            opacity: 0;
            &.active {
              -webkit-animation: add_ani 2s;
              animation: add_ani 2s;
            }

            @keyframes add_ani {
              from {
                opacity: 0;
              }
              50% {
                opacity: 1;
                transform: translateY(0);
                -webkit-transform: translateY(0);
              }
              to {
                opacity: 0;
                transform: translateY(px2em-s(-50px));
                -webkit-transform: translateY(px2em-s(-50px));
              }
            }

            @-webkit-keyframes add_ani {
              from {
                opacity: 0;
              }
              50% {
                opacity: 1;
                transform: translateY(0);
                -webkit-transform: translateY(0);
              }
              to {
                opacity: 0;
                transform: translateY(px2em-s(-50px));
                -webkit-transform: translateY(px2em-s(-50px));
              }
            }
          }

          .icon_beng {
            background-image: url("../image/mine_beng_icon.png");
            background-size: 100% 100%;
            width: 0.85em;
            height: 1.05em;
          }
        }
      }
    }

    .word_area {
      height: px2em-s(100px);
      padding-top: px2em-s(23px);
      @include box-sizing;
      .content {
        font-size: px2em-s(24px);
        text-align: center;
        color: #ffffff;
        span {
          color: #000;
        }
      }
    }
  }
}

.page#mine {
  > .btn {
    background-image: url("../image/mine_btn.png");
    background-size: 100% 100%;
    width: px2em-s(315px);
    height: px2em-s(79px);
    @include center-block;
    margin-top: px2em-s(-28px);
  }

  .dialog_phone_commit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    > .inner {
      width: px2em-s(555px);
      background-color: #fe6400;
      margin-top: px2em-s(155px);
      @include center-block;
      padding-bottom: px2em-s(30px);
      .close {
        height: px2em-s(35px);
        width: px2em-s(35px);
        padding: px2em-s(10px);
        background-image: url("../image/mine_close.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-origin: content-box;
        position: relative;
        left: px2em-s(501px);
        top: 0;
      }

      .word {

        span {
          line-height: 1.3;
          font-size: px2em-s(30px);
          font-weight: bold;
          display: block;
          text-align: center;

        }
      }

      .input {
        height: px2em-s(53px);
        width: px2em-s(444px);
        @include center-block;
        margin-top: px2em-s(12px);

        input {
          width: 100%;
          height: 100%;
          border: 0;
          background: #fff;
          border-radius: px2em-s(15px);
          @include box-sizing;
          @include font-dpr(16px);
          text-align: center;
          display: block;
          margin: 0;
        }
      }

      .save_btn {
        background-image: url("../image/mine_phone_save_btn.png");
        background-size: 100% 100%;
        width: px2em-s(229px);
        height: px2em-s(74px);
        @include center-block;
        margin-top: px2em-s(25px);
      }
    }
  }

}

.page#share {
  .btn {
    background-image: url("../image/share-btn.png");
    background-size: 100% 100%;
    width: px2em-s(497px);
    height: px2em-s(79px);
    @include center-block;
    margin-top: px2em-s(-28px);
    display: -webkit-box;

    div {
      height: px2em-s(79px);
      -webkit-box-flex: 1;
    }
  }
}

.share_success {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  > .inner {
    width: px2rem-s(555px);
    background-color: #fe6400;
    @include center-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    text-align: center;

    img {
      width: 100%;
    }

    .close {
      height: px2rem-s(35px);
      width: px2rem-s(35px);
      padding: px2rem-s(10px);
      background-image: url("../image/mine_close.png");
      background-size: 100%;
      background-repeat: no-repeat;
      background-origin: content-box;
      position: relative;
      left: px2rem-s(501px);
      top: 0;
    }

    .word1 {
      width: px2rem-s(446px);
      line-height: px2rem-s(78px);
      color: #ffffff;
      text-align: center;
      font-size: px2rem-s(44px);
      font-weight: bold;
      border-radius: 10rem;
      background-color: #c95203;
      @include center-block;
      margin-top: px2rem-s(10px);
    }

    .word2 {
      line-height: 1.6;
      font-size: px2rem-s(30px);
      font-weight: bold;
      text-align: center;
    }

    .word3 {
      line-height: 1.6;
      font-size: px2rem-s(36px);
      font-weight: bold;
      text-align: center;
    }

    .qrcode {
      width: px2rem-s(260px);
      margin-top: px2rem-s(10px);

      img {
        width: 100%;
      }
    }

    .word4 {
      line-height: 1.1;
      font-size: px2rem-s(26px);
      text-align: center;
      font-weight: border;
      margin-top: px2rem-s(15px);
    }
  }

}

